// 组件中有侨个按钮`addto10`和`add to 20`
// 可以直接把count值修改到对应的数字，目标count值是在组件中传迷过去的，需要在提交action的时候传道参数

// 提交action传参实现需求
// 1. 在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传送到action对象payload属性上

import { useSelector, useDispatch } from "react-redux";
import { increment,decrement,addToNumber } from "./store/modules/counterStore"

function App() {
  const { count } = useSelector(state => state.counter)
  //得到useDispatch函数
  const dispatch = useDispatch()
  return (
    <div className="App">
      {/* 调用dispatch提交action函数 */}
      <button onClick={()=> dispatch(decrement())}>-</button>
      { count }
      <button onClick={()=> dispatch(increment())}>+</button>
      <button onClick={()=> dispatch(addToNumber(10))}>addToNumber10</button>
      <button onClick={()=> dispatch(addToNumber(20))}>addToNumber20</button>
    </div>
  );
}

export default App;
